<template>
  <div class="headerContainer">
    <div>
      <span
        v-if="!isFullScreen"
        class="iconfont icon-quanping"
        @click="enterFullScreen"
      ></span>
      <span
        v-else
        class="iconfont icon-tuichuquanping"
        @click="quitFullScreen"
      ></span>
    </div>
    <el-dropdown @command="handleCommand">
      <div class="avatar">
        <img :src="avatar" alt="avatar.jpg" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item disabled>{{ username }}</el-dropdown-item>
        <el-dropdown-item divided command="updateAvatarHandle"
          >修改头像</el-dropdown-item
        >
        <el-dropdown-item command="updatePasswordHandle"
          >修改密码</el-dropdown-item
        >
        <el-dropdown-item command="quit">退出登入</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <div class="username">
        账号：<span>{{ username }}</span>
      </div>
      <div class="password">
        <span>旧密码：</span>
        <el-input v-model="password" size="small" show-password />
      </div>
      <div class="password">
        <span>新密码：</span>
        <el-input v-model="repassword" size="small" show-password />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePasswordSumbit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fullScreen from "@/utils/fullScreen";
import { updateAvatar, updatePassword } from "@/utils/api";
import { baseURL } from "@/http";
export default {
  data() {
    return {
      isFullScreen: false,
      dialogVisible: false,
      avatar: "/img/avatar.jpeg",
      password: "",
      repassword: "",
    };
  },
  computed: {
    username() {
      return sessionStorage.getItem("username");
    },
    uid() {
      return sessionStorage.getItem("uid");
    },
    username() {
      return sessionStorage.getItem("username");
    },
  },
  created() {
    if (sessionStorage.getItem("avatar")) {
      this.avatar = baseURL + sessionStorage.getItem("avatar");
    }
  },
  mounted() {
    let that = this;
    fullScreen.screenChange(
      () => {
        that.isFullScreen = true;
      },
      () => {
        that.isFullScreen = false;
      }
    );
  },
  methods: {
    enterFullScreen() {
      // 进入全屏
      fullScreen.Fullscreen(document.getElementById("app"));
    },
    quitFullScreen() {
      // 退出全屏
      fullScreen.exitFullscreen();
    },
    handleCommand(type) {
      switch (type) {
        case "updateAvatarHandle":
          this.updateAvatarHandle();
          break;
        case "updatePasswordHandle":
          this.updatePasswordHandle();
          break;
        case "quit":
          this.quit();
          break;
        default:
          break;
      }
    },
    updateAvatarHandle() {
      // 修改头像
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("accept", "image/*");
      input.onchange = async function () {
        let file = this.files[0];
        let formData = new FormData();
        formData.append("file", file);
        formData.append("uid", that.uid);
        const res = await updateAvatar(formData);
        that.avatar = baseURL + res;
        sessionStorage.setItem(that.avatar);
      };
      input.click(); // 模拟手动点击
    },
    updatePasswordHandle() {
      // 更新密码
      this.dialogVisible = true;
    },
    async updatePasswordSumbit() {
      if (!this.password || !this.repassword) {
        this.$message.error("输入密码不能为空！！");
        return;
      }
      try {
        let message = await updatePassword({
          uid: this.uid,
          password: this.password,
          repassword: this.repassword,
        });
        this.$message.success(message);
        this.dialogVisible = false;
      } catch (err) {
        this.$message.error(err.message);
      }
    },
    quit() {
      // 退出登入
      console.log(312312);
      sessionStorage.clear();
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style lang="less" scoped>
.el-dropdown-menu::v-deep {
  text-align: center;
}
.headerContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .iconfont {
    color: #fff;
  }
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  :hover {
    cursor: pointer;
  }
  .username {
    span {
      margin-left: 20px;
    }
  }
  .password {
    display: flex;
    align-content: center;
    margin-top: 10px;
    span {
      width: 80px;
    }
  }
}
</style>